<!--

 Copyright 2018-present Sonatype, Inc.

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

 http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.

-->

<div class="artifacts" [@slideUp]>
  <!-- TODO: http://schema.org/docs/gs.html -->

  <div class="artifacts-info" *ngIf="group && artifact">
    <h1 class="artifacts-title">
      <span class="ellipsis">{{ group + ':' + artifact }}</span>
    </h1>

    <div class="artifacts-actions" fxHide fxShow.gt-sm>
      <a target="_blank"
         href="{{ repositoryLink }}"
         mat-button>
        <span i18n>Browse </span>
        <mat-icon>folder</mat-icon>
      </a>
    </div>
  </div>

  <app-artifacts-description *ngIf="group && artifact"
                             [group]="group"
                             [artifact]="artifact">
  </app-artifacts-description>

  <table mat-table #table [dataSource]="dataSource" class="full-table table-condensed">
    <ng-container matColumnDef="groupId">
      <th mat-header-cell *matHeaderCellDef i18n>Group ID</th>
      <td mat-cell *matCellDef="let row">
        <div ngClass.gt-xs="ellipsis-rtl">
          <span class="title" fxHide.gt-xs>G:&nbsp;</span>
          <a [routerLink]="['/search']" [queryParams]="{q: 'g:' + row.g}"
             (click)="$event.stopPropagation()"
             i18n-matTooltip matTooltip="Search for all artifacts with this Group ID">{{ row.g }}</a>
        </div>
      </td>
    </ng-container>

    <ng-container matColumnDef="artifactId">
      <th mat-header-cell *matHeaderCellDef i18n>Artifact ID</th>
      <td mat-cell *matCellDef="let row">
        <div ngClass.gt-xs="ellipsis-rtl">
          <span class="title" fxHide.gt-xs>A:&nbsp;</span>
          <a [routerLink]="['/search']" [queryParams]="{q: 'a:' + row.a}"
             (click)="$event.stopPropagation()"
             i18n-matTooltip matTooltip="Search for all artifacts with this Artifact ID">{{ row.a }}</a>
        </div>
      </td>
    </ng-container>

    <ng-container matColumnDef="latestVersion">
      <th mat-header-cell *matHeaderCellDef>
        <ng-container *ngIf="q; else elseVersion" i18n>Latest Version</ng-container>
        <ng-template #elseVersion i18n>Version</ng-template>
      </th>
      <td mat-cell *matCellDef="let row">
        <div class="latest-version">
          <span class="title" fxHide.gt-xs>V:&nbsp;</span>
          <div class="version-row">

            <div class="latest">
              <a
                [routerLink]="['/artifact', row.g, row.a, (row.v && !row.latestVersion ? row.v :row.latestVersion), row.p]"
                title="&lrm; {{ (row.v && !row.latestVersion ? row.v :row.latestVersion) }}"
                (click)="$event.stopPropagation()">&lrm;
                {{ (row.v && !row.latestVersion ? row.v :row.latestVersion) }}
              </a>
            </div>

            <div class="all">

              <a
                *ngIf="row.versionCount"
                [routerLink]="['/artifact', row.g, row.a]"
                (click)="$event.stopPropagation()"
                i18n-matTooltip matTooltip="Show all versions of this Group ID and Artifact ID"
                style="">
                <span fxHide.gt-xs i18n>All versions</span>
                (<ng-container *ngIf="row.versionCount > 99; else elseCount" i18n>99+</ng-container><ng-template #elseCount>{{row.versionCount}}</ng-template>)
              </a>

            </div>

          </div>
        </div>

      </td>
    </ng-container>

    <ng-container matColumnDef="updated">
      <th mat-header-cell *matHeaderCellDef fxShow.xs="true" fxShow.sm="false" fxShow="true" i18n>
        Updated
      </th>
      <td mat-cell *matCellDef="let row" fxShow.xs="true" fxShow.sm="false" fxShow="true">
        <span class="title" fxHide.gt-xs><ng-container i18n>Updated</ng-container>:</span>
        {{ row.timestamp | date : 'dd-MMM-yyyy' : timezone }}
      </td>
    </ng-container>

    <ng-container matColumnDef="download">
      <th mat-header-cell *matHeaderCellDef fxHide.lt-sm i18n> Download</th>
      <td mat-cell *matCellDef="let row" fxHide.lt-sm>
        <mat-menu #downloadMenu="matMenu" [overlapTrigger]="false">
          <a *ngFor="let dl of row.downloadLinks" target="_blank" href="{{dl.link}}">
            <button mat-menu-item>{{dl.name}}</button>
          </a>
        </mat-menu>
        <button mat-icon-button [matMenuTriggerFor]="downloadMenu"
                (click)="$event.stopPropagation()">
          <mat-icon>file_download</mat-icon>
        </button>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns" fxHide.lt-sm></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"
        [routerLink]="['/artifact', row.g, row.a, (row.v && !row.latestVersion ? row.v :row.latestVersion), row.p]"></tr>
  </table>

  <mat-paginator #paginator
                 [length]="dataSource.totalCount"
                 [pageIndex]="0"
                 [pageSize]="20">
  </mat-paginator>

</div>
